// 设定 当前页数 默认是 第一页
// let page = 1;

// 根据 浏览器地址栏参数 发送请求 
// 调用函数 输入 当前页数 参数 

// setPage() 中 调用的 ajax请求 
// 是 异步程序 会在所有的同步程序执行结束之后 才会执行
// 所有和 ajax异步请求结束之后需要执行的 和 ajax异步请求相关的操作
// 都要写在 函数中 


// 将需要执行的程序 定义在 加载事件中 确保html标签加载完毕再触发执行
$(function () {
    // 默认显示 第一页内容
    setPage(1);
})








// 使用 async 封装定义 函数 
async function setPage(page) {
    // 获取 浏览器地址栏数据参数 
    const urlObj = getUrlValObj();

    // 设定 每页显示的数据数量
    let line = 4;

    // 发送ajax请求 
    let res = await myPromiseAjax({
        url: '../server/goods_list.php',
        type: 'get',
        data: {
            cat_one_id: urlObj.cat_one_id,
            line: line,
            page: page,
        },
    });

    res = JSON.parse(res);
    console.log(res);

    // 根据数据 动态生成页面 
    let str = '';

    // 循环遍历 res.data 数组
    res.data.forEach(item => {
        str += `
          <li class="list-item">
            <div class="panel panel-primary">
              <div class="panel-body">
                <ol class="breadcrumb">
                  <li><a href="#">${item.cat_one_id}</a></li>
                  <li><a href="#">${item.cat_two_id}</a></li>
                  <li class="active">${item.cat_three_id}</li>
                </ol>
              </div>
              <div class="panel-footer">
                <div class="row">
                  <div class="">
                    <div class="thumbnail">
                      <img
                        src="${item.goods_big_logo}"
                        alt="...">
                      <div class="caption">
                        <h3>${item.goods_name}</h3>
                        <p>
                          <i class="glyphicon glyphicon-yen"></i>
                          <span>${item.goods_price}</span>
                        </p>
                        <p>
                          <a href="javascript:;" class="btn btn-primary" role="button">查找相似商品</a> 
                          <a href="./detail.html?goods_id=${item.goods_id}" class="btn btn-danger" role="button">查看商品详情</a>
                        </p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </li>
          
          
          `;

        // 将 结果 写入 ul标签中
        $('.container ul').html(str);

    })


    // 在 ajax异步程序执行结束之后 
    // 调用插件 生成分页器 
    // 利用分页器插件 生成 分页效果
    // 以对象的形式 设定 分页器插件需要的配置参数
    // 其中一些数据是 根据 响应体结果 设定的 
    $('[name="p"]').pagination({
        pageCount: res.sumPage,             //  总页数
        totalData: res.row,                  //  数据总数量
        current: page,                      //  当前第几页
        showData: res.line,                  //  每页数据数量
        prevCls: 'prev',                    //  上一页 class 类名
        nextCls: 'next',                    //  下一页 class 类名
        prevContent: '上一页',              //  上一页 内容
        nextContent: '下一页',              //  下一页 内容
        activeCls: 'active',                //  选中页 class 类名
        mode: 'fixed',                      //  分页器插件显示状态 fixed固定模式 unfixed不固定模式
        count: 4,                           //  除了选中页 其他分页按钮的个数 也就是 页数总按钮 是 设置的数值 + 1 
        coping: true,                       //  true开启首页末页  false关闭首页末页
        homePage: '首页',                   //  首页节点内容
        endPage: '末页',                    //  末页节点内容
        isHide: true,                       //  总页数为 0 或者 1 时 隐藏分页控件
        keepShowPN: false,                  //  是否一直显示 上一页 下一页 只有显示模式设定为 unfixed 才能执行
        jump: true,                         //  开启 跳转页
        callback: function (result) {        //  回调函数 点击分页器按钮 执行页面跳转触发 回调函数的形参存储 分页器按钮的数据信息

            //  再次调用函数 根据触发的分页器按钮页数 发送请求
            setPage(result.getCurrent());

        }
    });
}

/*
      1,  获取数据 
        获取 浏览器地址栏 传参的 一级分类名称 

        向数据库发送请求 

          向 server/goods_list.php 发送请求

            以 get 方式 发送请求 
            携带 3个参数 
                cat_one_id      一级分类名称 
                page            当前显示的页数 默认是 第一页 
                line            每页显示的数据数值 根据实际项目需求设定 

        因为 async 声明的函数 特殊的执行方式 
            我们在 函数中 获取 浏览器地址栏参数 每页显示的数据数量
            传参 当期是第几页

      2,  响应体数据说明

        data: (4) [{…}, {…}, {…}, {…}]
          当前页的4条数据信息

        line: "4"
          当前页数据数量

        page: "1"
          当前是第几页

        row: "93"
          当前分类数据总数量

        sumPage: 24
          总页数 

      3,  分页器
        (1) 导入 js和css 外部文件 

        (2) 定一个div 通过 jQuery选择器 获取这个标签
            调用分页器插件 pagination() 函数方法 
            在选中的div中 生成分页器插件 标签内容

            $().pagination()

        (3) 通过设定 pagination() 函数方法的 参数 
            设定分页器插件的配置设定
          
        (4) callback 是 设定 点击分页器时 触发的回调函数
            需要给这个回调函数设定一个形参 

            存储 点击的分页器插件按钮相关的数据信息
    
            形参.getCurrent() 获取点击的分页器插件 对应的显示页数

        (5) 回调函数中设定的程序

            再次调用 页面动态渲染的函数setPage()
            参数是 形参.getCurrent() 中 存储的对应的显示页数 

            按照 需要显示的页数 再次发起请求 动态渲染生成页面
      4,  点击 查看商品详情 按钮 
          跳转 商品详情页 需要显示对应商品的相信信息

          需要向 商品详情页 传参 点击商品的 goods_id 
          也就是 点击商品 在数据库中的的编号序号


    */
